<template>
  <div class="container">
    <div class="hxylt1 mg50">
      <div class="box">
        <div class="nav">
          <a href="#">首页</a>
          >
          <a href="#">华西医联体</a>
        </div>
        <div class="tit">华西医联体</div>
      </div>
    </div>
    <div class="hxylt2 mg50">
      <div class="box">
        <div class="tit">
          <span>新闻中心</span>
          <a href="#">查看更多</a>
        </div>
        <div class="list">
          <div class="item">
            <div class="img"><img src="/img/hxylt/p1.png" alt="" /></div>
            <div class="minitit">华西超声医学学科联盟正式成立</div>
            <div class="desc"></div>
          </div>
          <div class="item">
            <div class="img"><img src="/img/hxylt/p2.png" alt="" /></div>
            <div class="minitit">我院业务团队入驻三亚市人民医院</div>
            <div class="desc"></div>
          </div>
          <div class="item">
            <div class="img"><img src="/img/hxylt/p3.jpg" alt="" /></div>
            <div class="minitit">2021年华西医联体“5G智享汇...</div>
            <div class="desc">
              10月28日，2021年华西医联体“5G智享汇”巡回管理培训在马边彝族自治县人民医院顺...
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="hxylt3 mg50">3</div>
    <div class="hxylt4 mg50">4</div> -->
    <div class="hxylt3 mg50">
      <div class="wrap">
        <div class="bg1"></div>
        <div class="textbox">
          <div class="text">
            <div class="middle-ct">
              <div class="tit">集团型医联体</div>
              <div class="desc">
                伴随城市建设进程、经济社会发展以及人民群众日益增长的美好生活需求，华西医院积极探索加强院外合作办医紧密性的适宜模式，尝试建设“条块结合”一体化管理的集团型医联体。集团型医联体由华西医院派驻管理和业务团队，全面负责合作医院的医疗服务、学科规划、运营管理、人力资源管理、财务管理、后勤管理等各个方面，以实现人财物全方位同质化协同发展，整合共享优质资源，有效提高运转效率，充分发挥华西医院的区域引领和示范带动作用，在多元办医格局中体现出应有的社会责任和时代担当。
                <br />
                现有集团型医联体2家：
                <br />
                华西天府医院位于成都科学城，毗邻天府总部商务区，总投资额约40亿元，总建筑面积约26.1万平方米，按照三级甲等医院标准建设，设置床位1200张、手术室66间。按照“政府主导、品牌引领、资源共享、共建共赢”的原则，以提高人民健康水平和促进医学事业发展为宗旨，以“国际一流、世界领先”为中心目标
                <br />
                成都上锦南府医院，位于成都市高新西区，自2012年开业以来取得良好的经济效益和社会效益，为服务百姓就医和区域可持续发展提供了有力保障。
              </div>
            </div>
          </div>
          <!-- 轮播图 -->
          <div class="focus">
            <div class="slick-mod">
              <swiper class="swiper" :options="swiperOption">
                <swiper-slide>
                  <img src="/img/hxylt/lunbo1.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                  <img src="/img/hxylt/lunbo2.jpg" alt="" />
                </swiper-slide>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
              </swiper>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hxylt4 mg50">
      <div class="wrap">
        <div class="focus">
          <div class="inner">
            <div class="slick-mod">
              <div class="slick-list">
                <div class="slick-track">
                  <div class="slick-slide">
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">
                              三亚市人民医院/四川大学华西三亚医院（深度领
                            </div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">
                              双流区第一人民医院/四川大学华西医院空港医院(深
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">
                              广安市人民医院/四川大学华西医院广安医院
                            </div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">
                              资阳市第一人民医院/四川大学华西医院资阳医院
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">
                              金堂县第一人民医院/四川大学华西医院金堂医院
                            </div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">
                              龙泉驿区第一人民医院/四川大学华西医院龙泉医院
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">
                              绵竹市人民医院/四川大学华西医院绵竹医院
                            </div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">四川省第五人民医院</div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="arrowbox">
              <div class="center"></div>
            </div>
          </div>
        </div>
        <div class="textbox">
          <div class="middle">
            <div class="middle-ct">
              <div class="text">
                <div class="tit">四川华西健康科技有限公司</div>
                <div class="desc">
                  四川华西健康科技有限公司（简称华西健康），系四川大学华西医院下属的国有资本经营管理平台，由国家卫健委批准、四川大学华西医院组建并全额投资。公司成立于1999年，注册资本1900万元，前身为天使宾馆，2016年重新改组为华西医院对外投资合作产业平台企业——四川华西健康科技有限公司。
                  <br />
                  <br />
                  公司主要从事华西医院原投资公司的归口管理和作为投资运营平台，运作、管理华西医院的各类对外投资项目。
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bg1"></div>
      </div>
    </div>
    <div class="hxylt5 mg50">
      <div class="box">
        <div class="titbox">
          <div class="tit">华西远程联盟</div>
          <div class="desc">
            为充分发挥华西医院在中国西部地区优势资源的辐射作用，构建优质高效的医疗卫生服务体系，提高优质医疗资源可及性和医疗服务整体效率，华西医院自2001年开始筹备建立华西远程医学网络。
            经过20年建设，华西远程医学网络入网机构已达680余家，实现了四川地区183个区市县全覆盖。现已覆盖中国西部地区为主的25个省市自治区。“华西医院—地市级医院—县区级医院—基层医疗机构”的远程分级协同医疗体系日臻成熟。
            借助华西远程医学网络与各级医院开展协同医疗服务与医学教育培训。现已累计在线培训各级各类基层医务人员600余万人次，为基层医院提供疑难疾病远程会诊咨询服务突破4万例。
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="hxylt6 mg50">6</div> -->
    <div class="hxylt6 mg50">
      <div class="wrap">
        <div class="focus">
          <div class="inner">
            <div class="slick-mod">
              <div class="slick-list">
                <div class="slick-track">
                  <div class="slick-slide">
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">01 华西心血管内科学科联...</div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">02 华西脑卒中学科联盟</div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">03 华西急诊学科联盟</div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">04 华西精神卫生学科联盟</div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">05 华西疼痛专科联盟</div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">06 华西耳鼻咽喉头颈外科...</div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">07 华西康复医学学科联盟</div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">08 华西泌尿外科学科联盟</div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">09 华西血液区域联盟</div>
                          </div>
                        </a>
                      </div>
                      <div class="slick-item">
                        <a href="#">
                          <div class="inner1">
                            <div class="tit">10 华西临床营养专科联盟</div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="arrowbox">
              <div class="center">
                <div class="slick-prev slick-arrow"></div>
                <div class="slick-next slick-arrow"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="textbox">
          <div class="middle">
            <div class="middle-ct">
              <div class="text">
                <div class="tit">华西学科联盟</div>
                <div class="desc">
                  为充分发挥华西医院作为国家级疑难重症医疗中心、国家临床医学研究中心及医疗协同网络平台的作用，辐射和带动区域内、区域间医疗服务能力提升和医疗服务同质化，2016年起，四川大学华西医院以优质学科资源为支撑，学科协作为纽带，逐步探索学科联盟医联体模式，组建以西部地区为主、辐射全国的特色专科医联体。
                  截至2020年，四川大学华西医院已牵头成立32个学科联盟，学科覆盖心脏内科、脑卒中、急诊、精神卫生、疼痛、耳鼻咽喉头颈外科、康复、泌尿、血液、营养、皮肤、检验、感染与肝病、消化内科、烧伤、乳腺、骨科、呼吸与危重症、视光、重症医学、肾科、消化外科、神经精神影像、神经外科、创伤、胸外、肝胆外科、肿瘤、小儿外科、包虫病、肝脏影像、肾移植。来自全国30个省、直辖市、自治区共计770余家兄弟医院2200余个兄弟科室加入其中。华西学科联盟旨在进一步加强联盟单位学科内涵建设，在联盟内推广专科诊疗规范，推进疾病分级诊疗，建立专科医疗团队同质化培养体系，加强科研合作，通过医教研三维一体帮扶，实现区域学科优势互补、协同发展，促进西部地区学科整体能力提升。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hxylt7 mg50">
      <div class="box">
        <!-- 切换栏目标题 -->
        <div class="caption">
          <div class="tabs">
            <div class="item now">新闻公告</div>
            <div class="item">远程协同</div>
            <div class="item">培训项目</div>
            <div class="item">申请流程</div>
          </div>
          <div class="pbutton"><a href="#">查看更多</a></div>
        </div>

        <!-- 切换栏目盒子 -->
        <div class="tabsbox">
          <div class="item">
            <div class="tit">
              <a href="#">5G远程会诊助力金堂“新冠肺炎”患者精准施治</a>
            </div>
            <div class="text_content">
              2月16日，金堂县第一人民医院·四川大学华西医院金堂医院在感染科示教室...
            </div>
            <div class="data">2020.02.17</div>
          </div>
          <div class="item">
            <div class="tit">
              <a href="#">我院开展首例跨省新冠疑难危重症远程会诊</a>
            </div>
            <div class="text_content"></div>
            <div class="data">2020.02.06</div>
          </div>
          <div class="item">
            <div class="tit">
              <a href="#">众志成城 砥砺前行——我院新冠肺炎救治专家团队...</a>
            </div>
            <div class="text_content"></div>
            <div class="data">2020.02.02</div>
          </div>
          <div class="item">
            <div class="tit">
              <a href="#">责任担当、同舟共济——华西医联体携手共御新冠疫...</a>
            </div>
            <div class="text_content"></div>
            <div class="data">2020.02.01</div>
          </div>
          <div class="item">
            <div class="tit">
              <a href="#">尹力省长听取我院运用5G技术远程会诊新型冠状病...</a>
            </div>
            <div class="text_content"></div>
            <div class="data">2020.01.29</div>
          </div>
          <div class="item">
            <div class="tit">
              <a href="#">我院利用5G技术开展省内首次跨区域新冠肺炎远程...</a>
            </div>
            <div class="text_content"></div>
            <div class="data">2020.01.28</div>
          </div>
        </div>
      </div>
    </div>
    <div class="hxylt8 mg50">
      <div class="box">
        <div class="caption">
          <span>城市社区联盟</span>
          <a href="#">查看更多</a>
        </div>

        <div class="yygg">
          <div class="item">
            <a href="#">
              <span class="s1">联盟简介</span>
              <span class="s2">2019.05.27</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="hxylt9 mg50">9</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.clear {
  content: "";
  display: block;
  clear: both;
}
.container {
  line-height: 1.5;
  color: #333;
  max-width: 1920px;
  margin: auto;
  .mg50 {
    margin: 0 50px;
  }
  .hxylt1 {
    height: 254px;
    background-image: url(/img/hxylt/blue.jpg);
    .box {
      width: 1180px;
      margin: auto;
      color: #fff;
      .nav {
        padding: 18px 0;
        font-size: 14px;
        line-height: 1.5;
        a {
          text-decoration: none;
          color: inherit;
        }
      }
      .tit {
        padding-top: 42px;
        font-size: 30px;
        line-height: 1.5;
        text-align: center;
      }
    }
  }
  .hxylt2 {
    height: 450px;
    padding-top: 65px;
    padding-bottom: 100px;
    .box {
      width: 1180px;
      height: 100%;
      margin: auto;
      //   background-color: antiquewhite;
      .tit {
        display: flex;
        justify-content: space-between;
        span {
          font-size: 32px;
          line-height: 1.5;
        }
        a {
          text-decoration: none;
          color: #333;
          font-size: 15px;
          padding-right: 25px;
          line-height: 48px;
          background: url(/img/hxylt/link-icon1.png) no-repeat right center;
          &:hover {
            background-image: url(/img/hxylt/link-icon2.png);
            color: #c7a368;
          }
        }
      }
      .list {
        margin-top: 35px;
        height: 367px;
        display: flex;
        // background-color: blanchedalmond;
        .item + .item {
          margin-left: 50px;
        }
        .item {
          width: 100%;
          height: auto;
          //   background-color: cadetblue;
          .img {
            height: 270px;
            img {
              max-width: 100%;
              border: 0;
              outline: 0;
              vertical-align: middle;
            }
          }
          .minitit {
            font-size: 18px;
            margin-top: 16px;
          }
          .desc {
            font-size: 12px;
            height: 44px;
            line-height: 22px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  // .hxylt3 {
  //   height: 605px;
  //   background-color: #008c8c;
  // }
  // .hxylt4 {
  //   height: 654px;
  // }
  .hxylt3 {
    // background-color: #fcc;
    height: 605px;
    overflow: hidden;
    .wrap {
      width: 1180px;
      height: 100%;
      margin: auto;
      background-color: chocolate;
      position: relative;
      .bg1 {
        background: url(/img/hxcy/blueBlock.jpg) repeat center 0;
        width: 1726px;
        height: 528px;
        position: absolute;
        bottom: 0;
        left: -227px;
        &::after {
          content: "";
          display: block;
          width: 289px;
          height: 322px;
          background: url(/img/hxcy/tingziLeft.png) no-repeat right bottom;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
      .textbox {
        position: absolute;
        left: -310px;
        background: url(/img/hxcy/bgi.jpg) no-repeat center 0;
        width: 1500px;
        height: 559px;
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
          padding-left: 320px;
          width: 520px;
          float: left;
          box-sizing: content-box;
          // background-color: cyan;
          // opacity: 1;
          .middle-ct {
            .tit {
              font-size: 32px;
            }
            .desc {
              margin-top: 14px;
              line-height: 22px;
              font-size: 14px;
            }
          }
        }
        .focus {
          width: 590px;
          height: 559px;
          float: right;
          position: relative;
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #ffffff;
            height: 46px;
          }
          .slick-mod {
            // background-color: darkgreen;
            width: 100%;
            height: 100%;
            .swiper {
              height: 100%;
              position: relative;
              img {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .hxylt4 {
    // background-color: antiquewhite;
    height: 654px;
    .wrap {
      position: relative;
      width: 1180px;
      height: 100%;
      margin: auto;
      // background-color: #008c8c;
      &::before {
        content: "";
        display: block;
        background: url(/img/hxcy/whiteBlock.jpg) repeat center 0;
        width: 320px;
        height: 540px;
        position: absolute;
        bottom: 0;
        left: -320px;
      }
      &::after {
        content: "";
        display: block;
        background: #911531;
        width: 99px;
        height: 99px;
        position: absolute;
        bottom: 0;
        left: -99px;
      }
      .focus {
        width: 600px;
        height: 553px;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0px 0px 35px 0px rgb(0 0 0 / 10%);
        .inner {
          padding: 62px 50px 44px 50px;
          .slick-mod {
            position: relative;
            display: block;
            z-index: index 1;
            user-select: none;
            .slick-list {
              height: 388px;
              user-select: none;
              position: relative;
              display: block;
              overflow: hidden;
              z-index: 1;
              .slick-track {
                height: 100%;
                position: relative;
                top: 0;
                left: 0;
                display: block;
                opacity: 1;
                width: 500px;
                .slick-slide {
                  width: 500px;
                  display: block;
                  outline: none;
                  float: left;
                  height: 100%;
                  min-height: 1px;
                  .slick-item {
                    width: 50%;
                    display: inline-block;
                    vertical-align: middle;
                    a {
                      text-decoration: none;
                      display: block;
                      border: 1px solid #d2d2d2;
                      border-radius: 5px;
                      margin: 5px;
                      height: 85px;
                      font-size: 16px;
                      line-height: 22px;
                      overflow: hidden;
                      color: #474747;
                      .inner1 {
                        padding: 20px 26px;
                      }
                    }
                  }
                }
                &::after {
                  content: "";
                  display: block;
                  clear: both;
                }
              }
            }
          }
          .arrowbox {
            bottom: 44px;
            right: 50px;
            left: 50px;
            margin-top: 15px;
            width: auto;
            position: absolute;
            .center {
              width: 140px;
              background: #fff;
              position: relative;
              margin: 0 auto;
              height: 40px;
              z-index: 2;
            }
            &::after {
              content: "";
              border-top: 1px solid #e0e0e3;
              position: absolute;
              top: 50%;
              left: 0;
              right: 0;
            }
          }
        }
      }
      .textbox {
        background: url(/img/hxcy/redBlock.jpg) repeat center 0;
        width: 910px;
        height: 541px;
        position: absolute;
        top: 112px;
        left: 600px;
        &::after {
          content: "";
          display: block;
          width: 398px;
          height: 355px;
          background: url(/img/hxcy/redTing.png) no-repeat center 0;
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .middle {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 518px;
          padding-left: 70px;
          height: 100%;
          color: #ffffff;
          position: relative;
          z-index: 3;
          font-size: 0;
          .middle-ct {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            letter-spacing: 0;
            .tit {
              font-size: 32px;
            }
            .desc {
              text-align: justify;
              line-height: 22px;
              margin-top: 18px;
            }
          }
        }
      }
      .bg1 {
        background: url(/img/hxcy/whiteBlockM.jpg) repeat center 0;
        width: 320px;
        height: 110px;
        position: absolute;
        top: 0;
        right: -330px;
      }
    }
  }
  .hxylt5 {
    height: 451px;
    .box {
      width: 1180px;
      height: 100%;
      margin: auto;
      .titbox {
        text-align: center;
        width: 856px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        .tit {
          font-size: 32px;
        }
        .desc {
          line-height: 22px;
          margin-top: 18px;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
  // .hxylt6 {
  //   height: 542px;
  // }
  .hxylt6 {
    height: 542px;
    .wrap {
      position: relative;
      width: 1180px;
      height: 100%;
      margin: auto;
      &::before {
        left: auto;
        right: -320px;
        content: "";
        display: block;
        background: url(/img/hxcy/whiteBlock.jpg) repeat center 0;
        width: 320px;
        height: 540px;
        position: absolute;
        bottom: 0;
      }
      &::after {
        left: auto;
        right: -99px;
        bottom: auto;
        top: 0;
        background: #244483;
        width: 99px;
        height: 99px;
        position: absolute;
        content: "";
        display: block;
        clear: both;
      }
      .focus {
        width: 590px;
        height: 442px;
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        position: absolute;
        box-shadow: 0px 0px 35px 0px rgb(0 0 0 / 10%);
        .inner {
          padding: 60px 41px 40px 41px;
          .slick-mod {
            z-index: 1;
            position: relative;
            display: block;
            user-select: none;
            .slick-list {
              height: 114px;
              z-index: 1;
              position: relative;
              display: block;
              .slick-track {
                opacity: 1;
                width: 508px;
                .slick-slide {
                  float: left;
                  height: 100%;
                  min-height: 1px;
                  display: block;
                  outline: none;
                  width: 100%;
                  .slick-item {
                    width: 50%;
                    display: inline-block;
                    vertical-align: middle;
                    a {
                      text-decoration: none;
                      width: 200px;
                      height: 45px;
                      line-height: 45px;
                      padding: 0 20px;
                      display: block;
                      border: 1px solid #d2d2d2;
                      border-radius: 5px;
                      margin: 5px;
                      font-size: 16px;
                      line-height: 22px;
                      overflow: hidden;
                      color: #474747;
                      .tit {
                        height: 44px;
                        overflow: hidden;
                        line-height: 44px;
                      }
                    }
                  }
                }
                &::after {
                  display: table;
                  content: "";
                  clear: both;
                }
              }
            }
          }
          .arrowbox {
            &::after {
              content: "";
              border-top: 1px solid #e0e0e3;
              position: absolute;
              top: 50%;
              left: 0;
              right: 0;
            }
            bottom: 44px;
            right: 50px;
            left: 50px;
            margin-top: 15px;
            width: auto;
            position: absolute;
            .center {
              display: flex;
              justify-content: space-around;
              width: 140px;
              background: #fff;
              position: relative;
              margin: 0 auto;
              height: 40px;
              z-index: 2;
              .slick-prev {
                opacity: 0.5;
              }
              .slick-next {
                transform: rotate(180deg);
              }
              .slick-arrow {
                display: block;
                box-sizing: border-box;
                background-color: #822230;
                border-color: #822230;
                width: 40px;
                height: 40px;
                background-image: url(/img/hxylt/jt1.png);
                border: 1 px solid #dbdee1;
                border-radius: 50%;
              }
            }
          }
        }
      }
      .textbox {
        background: url(/img/hxcy/blueBlock.jpg) repeat center 0;
        width: 910px;
        height: 541px;
        position: absolute;
        left: auto;
        right: 590px;
        top: 0;
        .middle {
          float: right;
          padding: 0;
          padding-right: 70px;
          width: 518px;
          height: 100%;
          color: #ffffff;
          position: relative;
          z-index: 3;
          font-size: 0;
          .middle-ct {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            letter-spacing: 0;
            .tit {
              font-size: 32px;
            }
            .desc {
              line-height: 22px;
              margin-top: 18px;
              text-align: justify;
            }
          }
          &::after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
          }
        }
        &::after {
          background-image: url(/img/hxcy/tingzi.png);
          width: 343px;
          height: 375px;
          right: auto;
          left: 0;
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
  .hxylt7 {
    height: 551px;
    padding-top: 88px;
    padding-bottom: 60px;
    .box {
      width: 1180px;
      height: 100%;
      margin: auto;
      // background-color: #fcc;
      .caption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
          text-decoration: none;
          color: inherit;
          padding-right: 32px;
          background: url(/img/hxylt/link-icon1.png) no-repeat right;
          &:hover {
            color: #c7a368 !important;
            background: url(/img/hxylt/link-icon2.png) no-repeat right;
          }
        }
        .tabs {
          width: 50%;
          display: flex;
          justify-content: space-between;
          font-size: 24px;
          line-height: 1.5;
        }
      }
      .tabsbox {
        margin-top: 35px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item {
          box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
          width: 512px;
          height: 83px;
          // margin-right: 20px;
          margin-bottom: 20px;
          padding: 27px 34px 30px;
          // background-color: khaki;
          .tit {
            font-size: 18px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            a {
              color: inherit;
              text-decoration: none;
            }
          }
          .text_content {
            margin: 4px 0 15px;
            font-size: 14px;
          }
          .data {
            font-size: 14px;
          }
        }
      }
    }
  }
  .hxylt8 {
    height: 147px;
    padding: 70px 0 90px;
    background: url(/img/hxylt/white.jpg);
    .box {
      width: 1180px;
      height: 100%;
      margin: auto;
      .caption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 32px;
        }
        a {
          text-decoration: none;
          color: inherit;
          padding-right: 32px;
          background: url(/img/hxylt/link-icon1.png) no-repeat right;
          &:hover {
            color: #c7a368 !important;
            background: url(/img/hxylt/link-icon2.png) no-repeat right;
          }
        }
      }
      .yygg {
        margin-top: 35px;
        background-color: #008c8c;
        .item {
          box-shadow: 0px 0px 18px 0px rgb(2 2 2 / 9%);
          font-size: 16px;
          background: #fff;
          padding: 20px 24px;
          padding-right: 40px;
          &:hover {
            color: #5a82cf;
          }
          a {
            text-decoration: none;
            color: inherit;
            display: flex;
            justify-content: space-between;
            .s1 {
              position: relative;
              padding-left: 20px;
              width: 60%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              &::after {
                content: "";
                display: block;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                border: 3px solid #5a82cf;
                position: absolute;
                top: 50%;
                left: 0;
                margin-top: -6px;
              }
            }
          }
        }
      }
    }
    .hxylt9 {
      height: 443px;
    }
  }
  .hxylt9 {
    background: url(/img/hxylt/bg2.jpg) no-repeat center;
    height: 443px;
    overflow: hidden;
  }
}
</style>
